import { useEffect, useRef } from "react";
import {
    ArcRotateCamera, Color4, Engine, HemisphericLight, Mesh, MeshBuilder, Plane, Scene, UniversalCamera,
    StandardMaterial, Vector3, Color3, DirectionalLight, Animation, CircleEase, EasingFunction, VertexBuffer, BackgroundMaterial, Texture, Ray, Matrix, RayHelper, Vector4, SpriteManager, ParticleSystem, GPUParticleSystem, CubeTexture,
} from '@babylonjs/core';
import SkyBox from "../01-环境/SkyBox";
import Fog from "../01-环境/Fog";
import BackMat from "../01-环境/BackMat";
import BackMat_Reflection from "../01-环境/BackMat-reflection";
import BackMat_Mirror from "../01-环境/BackMat-Mirror";
import LensFlares from "../01-环境/LensFlares";
import ReflectionProbes from "../01-环境/ReflectionProbes";
import VR_Photo from "../01-环境/VR-Photo";
import VR_Vides from "../01-环境/VR-Vides";


const canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


//天空盒
const skyBox = new SkyBox(canvas);

//雾(能见度)
// const fog = new Fog(canvas);

//背景材质
// const backMat = new BackMat(canvas);

//背景材质
// const backMat_Reflection = new BackMat_Reflection(canvas);

//镜面反射
// const backMat_Mirror = new BackMat_Mirror(canvas);

//镜头光晕
// const lensFlares = new LensFlares(canvas);

//反射探针
// const reflectionProbes = new ReflectionProbes(canvas);

//VR全景图
// const vr_Photo = new VR_Photo(canvas);

//VR视频
// const vr_Vides = new VR_Vides(canvas);



const RenderStructure = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const { current } = divRef;
        if (current != null) {
            current.innerHTML = '';
            current.append(canvas);
        }
    }, []);
    return (
        <div>
            <div ref={divRef}>

            </div>
        </div>
    );
};

export default RenderStructure;

